<template>
  <div class="inventory-view">
    <h2>库存查看</h2>
    <el-form :inline="true" class="search-form">
      <el-form-item label="生鲜名称">
        <el-input v-model="searchName" placeholder="请输入名称" />
      </el-form-item>
      <el-form-item label="储位">
        <el-select v-model="searchStorage" placeholder="请选择储位">
          <el-option label="全部" value="" />
          <el-option v-for="storage_area_obj in storages" :key="storage_area_obj.storageArea" :label="storage_area_obj.storageArea" :value="storage_area_obj.storageArea" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="fetchInventoryList">搜索</el-button>
        <el-button @click="resetSearch">重置</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="inventoryList" border style="width: 100%">
      <el-table-column prop="id" label="ID" width="80" align="center" />
      <el-table-column prop="itemName" label="生鲜名称" width="150" align="center" />
      <el-table-column prop="storageArea" label="储位名称" width="150" align="center" />
      <el-table-column prop="category" label="种类" width="120" align="center" />
      <el-table-column prop="quantityOnHand" label="库存(KG)" width="120" align="center" />
      <el-table-column prop="warningStatus" label="预警状态" width="120" align="center" />
    </el-table>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';

// 创建库存管理专用的API客户端实例
const inventoryApiClient = axios.create({
  baseURL: 'http://192.168.140.19:8001',
  timeout: 10000
});

const searchName = ref('');
const searchStorage = ref('');
const storages = ref([]);
const inventoryList = ref([]);

// 获取储位列表
// 获取储位列表
const fetchStorages = async () => {
  try {
    const response = await inventoryApiClient.get('/api/inventory/distinct-storage-areas');
    if (response.data && Array.isArray(response.data)) {
      storages.value = response.data;
    } else {
      storages.value = [];
      console.warn('获取到的储位数据格式不正确或为空:', response.data);
      // ElMessage.info('未能获取到储位数据或数据为空。'); // 可选提示
    }
  } catch (error) {
    console.error('获取储位列表失败:', error);
    ElMessage.error('获取储位列表失败');
    storages.value = []; // 出错时也清空
  }
};

// 获取库存列表
// 获取库存列表
const fetchInventoryList = async () => {
  try {
    const params = {};
    if (searchName.value) {
      params.itemName = searchName.value; // Changed 'name' to 'itemName' to match backend @RequestParam
    }
    if (searchStorage.value) {
      params.storageArea = searchStorage.value;
    }
    // 如果有其他搜索条件，如 category，也可以在这里添加
    // if (searchCategory.value) { params.category = searchCategory.value; }

    const response = await inventoryApiClient.get('/api/inventory/levels', { params });
    if (response.data && Array.isArray(response.data)) {
      inventoryList.value = response.data;
    } else {
      inventoryList.value = [];
      console.warn('获取到的库存数据格式不正确或为空:', response.data);
      // ElMessage.info('未能获取到库存数据或数据为空。'); // 可选提示
    }
  } catch (error) {
    console.error('获取库存列表失败:', error);
    ElMessage.error('获取库存列表失败');
    inventoryList.value = []; // 出错时也清空
  }
};

// 重置搜索条件
const resetSearch = () => {
  searchName.value = '';
  searchStorage.value = '';
  fetchInventoryList();
};

onMounted(() => {
  fetchStorages();
  fetchInventoryList();
});
</script>

<style scoped>
.inventory-view {
  padding: 20px;
}

.search-form {
  margin-bottom: 20px;
}
</style>